﻿ $(window).load(function () {
 	$(".loading").fadeOut()
 })
 
 $(function () {
 	echarts_2();
    echarts_3();
    echarts_4();
    
    
    
 	function echarts_2() {
 		// 基于准备好的dom，初始化echarts实例
 		var myChart = echarts.init(document.getElementById('echart2'));
 		var views = new Array();
		var likes = new Array();
		var reply = new Array();
		var xdata = new Array();
		var vdata = [
 			views,
			likes,
			reply,
 		];
 		$.ajax({
					type:"GET",
			        url: "http://localhost:8181/hotList/seletHotList",
			        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		         	contentType: "application/json; charset=utf-8",
		            dataType: 'json',
					success:function(result){
		            	for(var i = 0;i<50;i++){
		            		views[i]=result.result[i].views;
		            		likes[i]=result.result[i].likes;
		            		reply[i]=result.result[i].reply;
		            		xdata[i]=result.result[i].ranks;
		            	  }
		            	var ydata = ['播放量', '点赞数','评论数'];
 		var series = [];
 		$.each(vdata, function (index, val) {
 			var series_option = {
 				name: ydata[index],
 				type: 'bar',
 				itemStyle: {
 					normal: {color: ''}
 				},
 				barWidth: '20',
 				data: val
 			};
 			series.push(series_option);
 		})
 		option = {
 			legend: {
 				data: ydata,
 				type: 'scroll',
				 textStyle: {color: "#fff"},
 				top: '0'
 			},
 			tooltip: {
 				trigger: 'axis',
 				axisPointer: {
 					type: 'shadow'
 				}
 			},
			"color": ["#62c98d",  "#2f89cf",  "#ff9933"], 
 			grid: {
 				top: '14%',
 				left: '15',
 				right: '35',
 				bottom: '12%',
 				containLabel: true
 			},
			
 			xAxis: [{
 				type: 'category',
				axisLabel:  {textStyle: {color: "rgba(255,255,255,.6)",}},
				axisLine: {lineStyle: { color: 'rgba(255,255,255,.1)'}},
				data: xdata,
 				}],
 			yAxis: [{
 				name: '',
 				type: 'value',
				axisTick: {show: false},
					splitLine: {
 					show: true,
 					lineStyle: {
 						color: "#2f2a7a"
 					}
 				}, //x轴线
 				axisLabel: {textStyle: {color: 'rgba(255,255,255,.6)'}},
				axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},
 			}],
 			"dataZoom": [{
 				"show": true,
 				"height": 12,
 				"xAxisIndex": [
 					0
 				],
 				bottom: 5,
 				"start": 0,
 				"end": 10,
 				handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
 				handleSize: '110%',
 				handleStyle: {
 					color: "#d3dee5",
 				},

 				textStyle: {
 					color: "#fff"
 				},
 				borderColor: "rgba(255,255,255,.3)"

 			}],
 			series: series
 		};
 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
		                }
					
					
		})
 		
 		
 	}
 	
 	function echarts_3() {
       var myChart = echarts.init(document.getElementById('echart3'));
       var content = new Array();
	   var count = new Array();
       $.ajax({
					type:"GET",
			        url: "http://localhost:8181/videoBarrage/barrageSort",
			        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		         	contentType: "application/json; charset=utf-8",
		            dataType: 'json',
					success:function(res){
		            	for(var i = 0;i<5;i++){
		            		content[i]=res[i].content;
		            		count[i]=res[i].count;
		            	  }
 		var series = [];
 		option = {
            legend: {
                orient : 'vertical',
                x : 'left',
                data:content, textStyle:{
                    color:"#e9ebee"

                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            series : [
                {
                    name:'套餐',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:count[0], name:content[0],
                            itemStyle: {
                                normal: {
                                    color:"#1afffd"
                                }
                            }},
                        {value:count[1], name:content[1],
                            itemStyle: {
                                normal: {
                                    color:"#2e7cff"
                                }
                            }},
                        {value:count[2], name:content[2],
                            itemStyle: {
                                normal: {
                                    color:"#ffcb89"
                                }
                            }},
                        {value:count[3], name:content[3],
                            itemStyle: {
                                normal: {
                                    color:"#005ea1"
                                }
                            }},
                        {value:count[4], name:content[4],
                            itemStyle: {
                                normal: {
                                    color:"#0ad5ff"
                                }
                            }}
                    ]
                }
            ]
        };

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
		                }
					
					
		})
      
 	}
 	
 	
 	function echarts_4() {
        var myChart = echarts.init(document.getElementById('echart4'));
       var sex = new Array();
	   var count = new Array();
       $.ajax({
					type:"GET",
			        url: "http://localhost:8181/videoComment/sexSort?bv=BV1HZ4y1C7Pw",
			        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		         	contentType: "application/json; charset=utf-8",
		            dataType: 'json',
					success:function(res){
		            	for(var i = 0;i<3;i++){
		            		sex[i]=res[i].sex;
		            		count[i]=res[i].count;
		            	  }
 		var series = [];
 		option = {
            legend: {
                orient : 'vertical',
                x : 'left',
                data:sex, textStyle:{
                    color:"#e9ebee"

                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            series : [
                {
                    name:'套餐',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:count[0], name:sex[0],
                            itemStyle: {
                                normal: {
                                    color:"#1afffd"
                                }
                            }},
                        {value:count[1], name:sex[1],
                            itemStyle: {
                                normal: {
                                    color:"#2e7cff"
                                }
                            }},
                        {value:count[2], name:sex[2],
                            itemStyle: {
                                normal: {
                                    color:"#ffcb89"
                                }
                            }}
                    ]
                }
            ]
        };

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
		                }
					
					
		})
      
 	}
 	
 	
 	
})
